<template>
  <Layout >
    <Breadcrumb :style="{margin: '10px 0'}">
      <BreadcrumbItem>管理检测</BreadcrumbItem>
      <BreadcrumbItem>留言列表</BreadcrumbItem>
    </Breadcrumb>
    <Content>

      <Row :style="{margin:'10px 0'}">
        <i-col span="18">
          <ButtonGroup>
            <Button icon="md-trash" type="error" @click="remove_modal = true">删除</Button>
            <!--<Button v-if="CD_.btn_List.password_btn"  icon="md-key" type="warning" @click="updata_modal = true">重置密码</Button>-->
          </ButtonGroup>
        </i-col>
        <i-col span="6">
          <i-input v-model="search_value" placeholder="用户名|联系方式">
            <Button slot="append" icon="ios-search" @click="search_data"></Button>
          </i-input>
        </i-col>
      </Row>

      <Table height="713" :columns="columns" :data="table_data" @on-selection-change="selected_item"></Table>
      <div style="float: right ; margin: 10px">
        <Page :total="page.page_total"
              :page-size="page.page_size"
              :current="page.page_current"
              :page-size-opts="[14,20,30,40,50]"
              size="small" show-elevator show-sizer
              @on-change="change_page"
              @on-page-size-change="change_page_size"></Page>
      </div>
    </Content>

    <!--删除提示-->
    <Modal v-model="remove_modal" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>删除确认</span>
      </p>
      <div style="text-align:center">
        <p>您即将删除这选中的留言.</p>
        <p>确认删除吗?</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long   @click="remove_data">删除</Button>
      </div>
    </Modal>

  </Layout>
</template>

<script>
  export default {
    name: 'User',
    data() {

      return {
        search_value: '',//搜索框内容
        page: {
          page_current: 1,//分页显示第几页
          page_total: 40,//分页总条数
          page_size: 14,//每页多少条
        },
        remove_modal: false,//删除确认窗口
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '姓名',
            width: 160,
            key: 'user_name'
          },
          {
            title: '联系方式',
            width: 160,
            key: 'user_mobile'
          },
          {
            title: '需求资料',
            key: 'text_comments'
          }
        ],
        selectd_ids: [],//选中的id
        table_data: []
      }
    },
    methods: {
      change_page(page) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/11 17:18
        *=======================================================
        *@function  选择页数时触发
        * page  当前选择的页数
        *=====================================================*/
        this.page.page_current = page
        this.getUser_data();
      },
      change_page_size(page_size) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/11 17:18
        *=======================================================
        *@function  选择每页多少条时触发
        * page_size  当前每页多少条
        *=====================================================*/
        this.page.page_size = page_size
        this.getUser_data();
      },
      selected_item(data) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/11 16:41
        *=======================================================
        *@function  选中内容时触发
        *
        * data 为已选内容
        *=====================================================*/
        this.selectd_ids = data.map(function (item) {
          if (item != null && item != undefined) {
            return item.id
          }
        }).join();//需要删除的id

      },
      remove_data() {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/12 10:09
        *=======================================================
        *@function  删除信息
        *=====================================================*/
        if (this.selectd_ids.length > 0) {
          this.modal_loading = true;
          this.$http({
            method: 'post',
            url: this.CD_.qj_url + 'index/comments/removeComments',
            data: {
              selectd_ids: this.selectd_ids
            }
          }).then(function (res) {
            var json = res.data;
            if (json.status == 1) {
              this.modal_loading = false ;
              this.remove_modal = false ;
              this.$Notice.success({title: '成功删除留言~~'});
              this.getUser_data();
            } else {
              this.$Notice.error({title: '删除留言失败~~'});
            }

          }.bind(this)).catch(function (err) {
            this.$Notice.error({title: '删除留言失败，错误：' + err});
          }.bind(this))
        } else {
          this.$Notice.warning({
            title: '请勾选要删除的留言~~',
          });
        }

      },
      search_data() {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/11 18:30
        *=======================================================
        *@function  搜索内容
        *=====================================================*/
        this.getUser_data();

      },
      getUser_data() {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/12 11:36
        *=======================================================
        *@function  获取初始化信息、搜索、分页
        *=====================================================*/
        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/comments/getComments',
          data: {
            search_value: this.search_value,
            page_current: this.page.page_current,
            page_size: this.page.page_size
          }
        }).then(function (res) {
          var json = res.data;
          if (json.status) {
            this.table_data = json.user_data;
            this.page = json.page;
            this.$Loading.finish();
          } else {
            this.$Notice.error({title: '留言不存在~~~'});
            this.$Loading.error();
          }


        }.bind(this)).catch(function (err) {
          this.$Notice.error({title: '初始化数据失败，错误：' + err});
        }.bind(this))
      }

    },
    mounted() {
      this.getUser_data();
    }
  }
</script>

<style scoped>
  .user_text{
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85098);
    line-height: 18px;
    display: block;
    margin-bottom: 16px;
  }
  .ivu-col{
    font-size: 14px;
    line-height: 35px;
  }
</style>
